<template>
  <div class="header row">
    <div class="left">
      <el-menu
        v-if="leftType === 'menu'"
        :default-active="leftMenu[0] ? leftMenu[0].name : 'test'"
        mode="horizontal"
        background-color="#f6f6f6"
        text-color="#333"
        active-text-color="#2362FB"
        @select="handleClick"
      >
        <el-menu-item v-for="(item, index) in leftMenu" :key="index" :index="item.name">
          <template slot="title">
            <img :src="item.icon" class="icon">
            <div class="fwb">{{ item.label }}</div>
          </template>
        </el-menu-item>
      </el-menu>
      <div
        v-if="leftType === 'label'"
        class="title row lh56"
      >
        <img :src="leftInfo.icon" class="icon">
        <div>{{ leftInfo.label }}</div>
      </div>
    </div>
    <div class="middle">
      <slot name="middle" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    props: {
      leftType: {
        type: String,
        default: ''
      }, // 左侧样式
      leftMenu: {
        type: Array,
        default: () => []
      }, // 菜单类型
      leftInfo: {
        type: Object,
        default: () => { return {}; }
      } // 标题类型
    },
    methods: {
      handleClick(activeName) {
        this.$emit('activeMenu', activeName);
      }
    }
  };
</script>

<style scoped lang="scss">
  .header {
    .left {
      .el-menu-item {
        height: 56px;
        line-height: 56px;
        padding: 0 5px;
        display: flex;
        align-items: center;
      }
      .icon {
        width: 26px;
        height: 26px;
        margin-right: 10px;
        display: block;
        overflow: hidden;
        border-radius: 5px;
      }
    }
  }
</style>
